<template>
  <div>
    <div class="header_nav">
    <van-icon name="arrow-left" size="40" color="#fff"/>
  <van-search
      disabled
      class="van-search_style"
      v-model="value"
      show-action
      placeholder="请输入小区地址"
      @click="onSearch"
      background="#21b97a"
  ><template #label >
    <div @click="tocity">{{nowCity}}</div>
  </template>
  <template #action>
    <!-- <div @click="onSearch">搜索</div> -->
    <!-- 下面是组件渲染部分 -->
  </template>
  </van-search>
  <van-icon @click="getList" name="location-o" size="50" color="#fff" class="icon-map"/>
  </div>
  <!-- 下拉挑选的组件 -->
  <hoseSelect />
  <!-- 滚动功能还没做 -->
  <van-list
         v-model="loading"
         :finished="finished"
         finished-text="没有更多了"
         @load="onLoad"
         offset="50"
         :immediate-check="false"
        >
        <listem
          v-for="item in housesList"
          :key="item.houseCode"
          :obj="item"
        />

        </van-list>

    </div>
</template>
<script>
import { geiHousesList } from '@/api'
import { Toast } from 'vant'
// import listem from '../List/components'
import listem from './components/listem.vue'
import hoseSelect from './components/select.vue'
export default {
  data () {
    return {
      nowCity: localStorage.getItem('nowCity'),
      value: '',
      housesList: [],
      articleList: [], // 文章列表
      loading: false, // 底部加载状态
      finished: false, // 数据是否全部加载完成
      value1: 0,
      value2: 'a',
      option1: [
        { text: '全部商品', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 }
      ],
      option2: [
        { text: '默认排序', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' }
      ]
    }
  },
  methods: {
    tocity () {
      this.$router.push('/city')
      // console.log('wada')
    },
    // 底部加载
    onLoad () {
      console.log('到底了哦~~')
    },
    onSearch (val) {
      // console.log('asd')
      Toast(val)
      this.$router.push('/search')
    },
    onCancel () {
      Toast('取消')
    },
    async getList () {
      const res = await geiHousesList()
      this.housesList = res.data.body.list
      // console.log(this.housesList)
    }
  },
  async created () {
    this.getList()
  },
  components: {
    listem,
    hoseSelect
  }
}
</script>

<style lang="less" scoped>
  .header_nav{
    background-color: #21b97a;
    display: flex;
    // height: 50px;
    // padding: 0 10px;
    align-items: center;
    text-align: center;
    .van-search_style{
      //  padding-left: 10px;
      text-align: center;
      width: 84%;
    }
  }
  .cols{
    text-align: center;
    background-color: #fff;
    color: #21b97a;
  }
  .colb{
    text-align: center;
    background-color:#21b97a;
    color:  #fff;
  }
</style>>
